<template>
  <a-row class="host-metrics metrics-btn" :gutter="8">
    <a-col :span="12">
      <a-card title="24小时-热门域名-TOP10" :bordered="false" class="qn-card">
        <div ref="containerHost" style="height: 300px"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="24小时-访问来源-TOP10" :bordered="false" class="qn-card">
        <div ref="containerReferer" style="height: 300px"></div></a-card
    ></a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { Chart } from '@antv/g2'
import { type UserMetricsParams } from '@/api/home/model/metrics'
import { getRefererList, getHostList } from '@/api/home/metrics'

let params: UserMetricsParams = {
  type: 3,
  startTime: '2012-10-10 00:00:00',
  endTime: '2212-10-10 00:00:00'
}
let chartHost
let chartReferer
const containerHost = ref(null)
const containerReferer = ref(null)
onMounted(() => {
  chartHost = renderBarHostChart(containerHost.value)
  chartReferer = renderBarRefererChart(containerReferer.value)
})
async function renderBarHostChart(container: any) {
  let items = await getHostList(params)
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })

  chart.coordinate({ type: 'radial', endAngle: Math.PI })
  chart
    .interval()
    .data(items)
    .encode('x', 'item')
    .encode('y', 'metrics')
    .scale('y', { type: 'sqrt' })
    .encode('color', 'item')
    .encode('size', 40)
    .style('radius', 20)
    .legend(false)
    .label({
      text: 'metrics',
      position: 'outside',
      autoRotate: true,
      rotateToAlignArc: true,
      dx: 0
    })
    .axis('x', { title: false })
    .axis('y', false)
    .animate('enter', { type: 'waveIn', duration: 1000 })

  chart.render()
}
async function renderBarRefererChart(container: any) {
  let items = await getRefererList(params)
  const chart = new Chart({
    container: container,
    autoFit: true,
    margin: 0,
    padding: 0
  })

  chart.coordinate({ type: 'radial', endAngle: Math.PI })
  chart
    .interval()
    .data(items)
    .encode('x', 'item')
    .encode('y', 'metrics')
    .scale('y', { type: 'sqrt' })
    .encode('color', 'item')
    .encode('size', 40)
    .style('radius', 20)
    .legend(false)
    .label({
      text: 'metrics',
      position: 'outside',
      autoRotate: true,
      rotateToAlignArc: true,
      dx: 0
    })
    .axis('x', { title: false })
    .axis('y', false)
    .animate('enter', { type: 'waveIn', duration: 1000 })

  chart.render()
}
</script>
